<template>
    <div class="wrap">
        <div class="progress-bar">
            <div class="progress"></div>
            <!-- <div class="inner" :style="{ '--left': progressWidth + '%' }"> <span class="prog">{{
                    progress }}%</span></div> -->
            <div class="inner" :style="{ 'width': progressWidth + '%' }"></div>
            <span class="prog">{{
                progress }}%</span>
            <!-- <div class="runner" :style="{'--left':progress + '%'}"></div> -->
            <!-- <div class="num" v-if="value.finish_num !== 21">21次下单可获得黄金店铺({{ value.finish_num }}/{{ value.total_num }})
            </div> -->
        </div>
    </div>
</template>

<script>
import sheep from '@/sheep'
import { computed } from 'vue'
export default {
    name: 'index',
    props: {
        progress: {
            type: [Number, String],
            default: '0'
        },
        value: {
            type: Object,
            default: (() => { })
        }
    },
    computed: {
        progressWidth() {
            if (this.progress == 100) {
                return '84'
            }
            else if (this.progress == 0) {
                return '6'
            } else {
                return this.progress
            }
        }
    },
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    position: relative;
    height: 40px;
}

.num {
    margin-top: 20rpx;
    color: #9E9E9E;
    font-weight: bold;
}

.prog {
    width: 100rpx;
    text-align: center;
    position: absolute;
    right: -4rpx;
    top: 14%;
    color: #fff;
}

.progress-bar {
    position: absolute;
    top: 46rpx;
    width: 100%;
    height: 50rpx;
    border-radius: 12rpx;
    // background-color: rgb(255, 237, 212);
    background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250410/f71168d66cd29d1d6f06d83a46711a51.png');
    background-size: 100% 100%;

    .inner {
        position: absolute;
        top: 8rpx;
        left: 12rpx;
        // z-index: 10;
        border-radius: 99999px;
        height: 70%;
        // background: #f28e01;
        transition: left 1s ease-in-out;
        background-image: url("https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250410/54dd587fb8842be338d5ac62b5cf2c92.png");

        // animation: changeWidth 1s forwards linear, shrink 1s linear infinite;
        // background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250410/948e249ca5035d5ad85a5171e950c366.png');
        // background-color:rgb(255, 237, 212);

    }
}

.progress {
    width: 0%;
    height: 100%;
    background-color: #00aaff;
    transition: width 1s ease-in-out;

}

.runner {
    width: 60px;
    height: 24px;
    // background-image: url(~@/assets/images/run.gif) ;
    background-size: contain;
    position: absolute;
    top: -22px;
    transition: left 1s ease-in-out;
    animation: run 1s forwards linear;
    margin-left: -55px;
}

@keyframes run {
    0% {
        left: 0;
    }

    100% {
        left: var(--left);
    }
}

@keyframes changeWidth {
    0% {
        width: 0;
    }

    100% {
        width: var(--left);
        background-position: 40px 0
    }
}

@keyframes shrink {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 40px 0
    }
}
</style>